<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="change-box flexWrapNo" :style="{top:customHeight.top+'px',height:customHeight.height+'px'}"
					@tap="goPage('/pages/index/myStore')">
					切换门店
					<image src="../../static/index/change-icon.png" class="change-icon"></image>
				</view>
				<view :style="{paddingTop:navHeight+'px'}"></view>
				<view class="shop-info-box flexWrap">
					<view class="shop-info flexWarpColumn">
						<view class="shop-name">{{storeInfo.shop_name}}</view>
						<view class="status" :class="{'repair-status':storeInfo.store_status_data!='business'}">
							<block v-if="storeInfo.store_status_data=='business'">营业中</block>
							<block v-else-if="storeInfo.store_status_data=='rest'">休息中</block>
							<block v-else>筹备中</block>
						</view>
					</view>
					<view class="boss-img">
						<image src="../../static/index/bossImg.png"></image>
					</view>
				</view>
				<uni-notice-bar show-icon scrollable v-if="note&&(identity!=2&&identity!=6)"
					@tap="goPage('/pages/operate/operateDetails?id='+noteId)" :text="note" :speed='50' color="#FFB700"
					:fontSize="11" background-color="#1D1C5C" />
				<view class="active-box flexWrap" v-if="identity!=2&&identity!=6">
					<view class="active-item flexWrapNo" :class="{currment:!signin_status}"
						@tap="goPage('/page-home/clock')">
						<image src="../../static/index/clock-icon.png" style="height: 30rpx;"></image>
						今日打卡
						<image src="../../static/index/fail-icon.png" class="fail-icon" v-if="!signin_status"></image>
					</view>
					<view class="active-item flexWrapNo" :class="{currment:!records_status}"
						@tap="goPage('/page-home/noteList')">
						<image src="../../static/index/note-icon.png"></image>
						官方通知
						<image src="../../static/index/fail-icon.png" class="fail-icon" v-if="!records_status"></image>
					</view>
					<view class="active-item flexWrapNo" :class="{currment:!transmit_status}"
						@tap="goPage('/page-home/forwardList')">
						<image src="../../static/index/forward-icon.png"></image>
						今日转发
						<image src="../../static/index/fail-icon.png" class="fail-icon" v-if="!transmit_status"></image>
					</view>
				</view>
				<block v-if="storeInfo.store_status_data=='business'||storeInfo.store_status_data=='rest'">
				<view class="operation-box flexWrapNo">
					<view class="operation-item flexWarpCenterColumn" @tap="goPage('/page-home/operatingData')"
						v-if="identity!=2||is_mini==1">
						<view class="operation-img">
							<image src="../../static/index/operating-icon.png"></image>
						</view>
						<view>营业报表</view>
					</view>
					<view class="operation-item flexWarpCenterColumn" @tap="goPage('/page-home/memberData')"
						v-if="identity!=2&&identity!=6">
						<view class="operation-img">
							<image src="../../static/index/member-icon.png"></image>
						</view>
						<view>会员报表</view>
					</view>
					<view class="operation-item flexWarpCenterColumn" @tap="goPage('/pages/index/orderList')"
						v-if="identity!=2&&identity!=6">
						<view class="operation-img">
							<image src="../../static/index/order-icon.png"></image>
						</view>
						<view>订单明细</view>
					</view>
					<!-- <view class="operation-item flexWarpCenterColumn" @tap="goManage()">
							<view class="operation-img">
								<image src="../../static/index/manage.png"></image>
							</view>
							<view>门店管理</view>
						</view> -->
					<view class="operation-item flexWarpCenterColumn" @tap="goTableManage()"
						v-if="identity!=6">
						<view class="operation-img">
							<image src="../../static/index/table-icon.png"></image>
						</view>
						<view>桌台管理</view>
					</view>
				</view>
				<block v-if="identity!=2&&isShow">
					<view class="profit-box-new">
						<view class="describe-box flexWrapNo"  @tap="describeFlag=true">
							<image src="/static/index/describe-icon.png" class="describe-icon"></image>
							报表说明
						</view>
						<view class="profit-top flexWrap">
							<view class="profit-item flexWarpCenterColumn">
								<view>{{storeData.order_count||'0.00'}}</view>
								<view class="profit-text">今日订单数</view>
							</view>
							<view class="profit-item flexWarpCenterColumn">
								<view>{{storeData.tatal_income||'0.00'}}</view>
								<view class="profit-text">今日总收入</view>
							</view>
							<view class="profit-item flexWarpCenterColumn">
								<view>{{storeData.cashout_amount||'0.00'}}</view>
								<view class="profit-text">待结算金额</view>
							</view>
						</view>
						<view class="profit-cont">
							<view class="profit-title-box flexWrap">
								<view>小程序收入</view>
								<view>{{storeData.program_income||'0.00'}}</view>
							</view>
							<view class="profit-item flexWrap">
								<view>微信支付平台</view>
								<view>{{storeData.order_online_amount||'0.00'}}</view>
							</view>
							<view class="profit-item flexWrap">
								<view>门店卡充值</view>
								<view>{{storeData.recharge_money||'0.00'}}</view>
							</view>
							<view class="profit-item flexWrap">
								<view>通卡抵扣开台</view>
								<view>{{storeData.card_amount||'0.00'}}</view>
							</view>
							<view class="profit-item flexWrap">
								<view>助教订单</view>
								<view>{{storeData.assistant_money||'0.00'}}</view>
							</view>
							<view class="line"></view>
							<view class="profit-item flexWrap">
								<view>小程序退款</view>
								<view>{{storeData.refund_money||'0.00'}}</view>
							</view>
							<view class="profit-item flexWrap">
								<view>小程序系统服务费</view>
								<view>{{storeData.program_platform_commission||'0.00'}}</view>
							</view>
							<view class="profit-item flexWrap">
								<view>银行手续费</view>
								<view>{{storeData.bank_amount||'0.00'}}</view>
							</view>
						</view>
						<view class="profit-cont">
							<view class="profit-title-box flexWrap">
								<view>团单收入</view>
								<view>{{Number(storeData.tuan_amount)+Number(storeData.douyin_amount)||'0.00'}}</view>
							</view>
							<view class="profit-item flexWrap">
								<view>美团核销</view>
								<view>{{storeData.tuan_amount||'0.00'}}</view>
							</view>
							<view class="profit-item flexWrap">
								<view>抖音核销</view>
								<view>{{storeData.douyin_amount||'0.00'}}</view>
							</view>
							<view class="line"></view>
							<view class="profit-item flexWrap">
								<view>团单系统服务费（次日补扣）</view>
								<view>{{storeData.day_platform_commission ||'0.00'}}</view>
							</view>
						</view>
						<view class="profit-cont">
							<view class="profit-title-box flexWrap">
								<view>今日补扣团单系统服务费</view>
								<view>{{storeData.entry_platform_commission||'0.00'}}</view>
							</view>
							<view class="profit-item flexWrap" v-for="(item,index) in day_platform_commission_list" :key="index">
								<view>{{item.report_date}}</view>
								<view>{{item.money}}</view>
							</view>
							<view class="line"></view>
							<view class="profit-item flexWrap">
								<view>剩余补扣团单系统服务费</view>
								<view>{{storeData.remaining_platform_commission||'0.00'}}</view>
							</view>
						</view>
						<view class="profit-month flexWrap"  @tap="goPage('/page-home/monthlyReport')">
							<view>经营月报</view>
							<view>{{currentMonth}}月</view>
						</view>
					</view>
				</block>
				<view class="describe-model" v-if="describeFlag">
					<image src="/static/user/close.png" class="close-btn" @tap="describeFlag=false"></image>
					<view class="describe-top">
						报表说明
					</view>
					<view class="describe-cont">
						<view class="describe-title">总数据说明：</view>
						<view class="describe-item flexWrapNo">
							<text class="describe-dot"></text>
							今日订单数：已支付的小程序订单数（含充值抵扣订单数）+已核销的团单订单数
						</view>
						<view class="describe-item flexWrapNo">
							<text class="describe-dot"></text>
							今日总收入：小程序收入+团单收入的总收入
						</view>
						<view class="describe-item flexWrapNo">
							<text class="describe-dot"></text>
							待结算金额：小程序收入-小程序退款-小程序系统服务费-银行手续费-今日补扣团单系统服务费
						</view>
					</view>
					<view class="describe-cont">
						<view class="describe-title">小程序收入说明：</view>
						<view class="describe-item flexWrapNo">
							<text class="describe-dot"></text>
							小程序收入：微信支付开台+门店卡充值+通卡抵扣开台+助教订单的总收入
						</view>
						<view class="describe-item flexWrapNo">
							<text class="describe-dot"></text>
							微信支付开台：通过微信支付开台订单已支付的总收入
						</view>
						<view class="describe-item flexWrapNo">
							<text class="describe-dot"></text>
							门店卡充值：门店卡充值订单的总收入
						</view>
						<view class="describe-item flexWrapNo">
							<text class="describe-dot"></text>
							通卡抵扣开台：通过通卡抵扣开台订单已完成的总收入
						</view>
						<view class="describe-item flexWrapNo">
							<text class="describe-dot"></text>
							助教订单：助教订单已支付的总收入
						</view>
						<view class="describe-item flexWrapNo">
							<text class="describe-dot"></text>
							小程序退款：小程序已退款的总金额
						</view>
						<view class="describe-item flexWrapNo">
							<text class="describe-dot"></text>
							小程序系统服务费：（小程序收入-小程序退款）*3%
						</view>
						<view class="describe-item flexWrapNo">
							<text class="describe-dot"></text>
							银行手续费：(微信支付开台+门店卡充值+助教订单)*0.28%+通卡抵扣开台*0.38%，如有退款，会扣除退款金额的手续费
						</view>
					</view>
					<view class="describe-cont">
						<view class="describe-title">团单收入说明：</view>
						<view class="describe-item flexWrapNo">
							<text class="describe-dot"></text>
							团单收入：美团已核销+抖音已核销的总收入
						</view>
						<view class="describe-item flexWrapNo">
							<text class="describe-dot"></text>
							美团收入：美团团购开台订单已核销的总收入
						</view>
						<view class="describe-item flexWrapNo">
							<text class="describe-dot"></text>
							抖音收入：抖音团购开台订单已核销的总收入
						</view>
						<view class="describe-item flexWrapNo">
							<text class="describe-dot"></text>
							团单系统服务费（次日补扣）：团单收入*3%，今日的团单系统服务费于次日补扣
						</view>
					</view>
					<view class="describe-cont">
						<view class="describe-title">今日补扣团单系统服务费说明：</view>
						<view class="describe-item flexWrapNo">
							<text class="describe-dot"></text>
							今日补扣团单系统服务费：今日补扣的团单系统服务费总金额
						</view>
						<view class="describe-item flexWrapNo">
							<text class="describe-dot"></text>
							补扣明细：今日补扣的具体月份以及补扣系统服务费金额
						</view>
						<view class="describe-item flexWrapNo">
							<text class="describe-dot"></text>
							剩余待补扣团单系统服务费：截止到当前，剩余的待补扣团单系统服务费总金额
						</view>
					</view>
				</view>
				<view class="mask-wrap" v-if="describeFlag"></view>
				</block>

				<!-- 筹备中 -->
				<block v-else>
					<view class="setting-procedure">
						<view class="guide-info">
							尊敬的店长：
							<view>您的店铺正在筹备中，请您按照以下指引，逐步确认信息，完成店铺设置，有任何疑问可在群内沟通。祝您早日开业。</view>
						</view>
						<view class="set-info">
							<view class="step-box">
								<view class="step-item" >
									<view class="step-name">第一步：确认店铺信息*</view>
									<view class="step-opreate">
										<text class="operate-item" @tap="goPage('/page-home/shopInfo')">去确认</text>
									</view>
								</view>
								<view class="step-item">
									<view class="step-name">第二步：智慧设备激活*</view>
									<view class="step-opreate">
										<text class="operate-item" v-if="hardware_type==1" @tap="jumpPage(2,'/pages-activation/aqaraActivate')">aqara激活</text>
										<text class="operate-item" v-if="hardware_type==2" @tap="jumpPage(2,'/pages-activation/smartboxActivate')">智能盒子激活</text>
									</view>
								</view>
								<view class="step-item">
									<view class="step-name">第三步：设置桌台*</view>
									<view class="step-opreate">
										<text class="operate-item"  @tap="jumpPage(3,`/moduleB/manage/tableSet?hardware_type=${hardware_type}`)">去设置</text>
									</view>
								</view>
								<view class="step-item">
									<view class="step-name">第四步：设置定价*</view>
									<view class="step-opreate">
										<text class="operate-item" @tap="jumpPage(4,'/moduleB/manage/priceSet')">去设置</text>
									</view>
								</view>
								<view class="step-item">
									<view class="step-name">第五步：营销活动设置</view>
									<view class="step-opreate">
										<text class="operate-item" @tap="goPage('/moduleB/manage/newUseActive')">新用户赠券</text>
										<text class="operate-item" @tap="goPage('/moduleB/manage/rechargeSet')">充值设置</text>
									</view>
								</view>
								
								<view class="step-item">
									<view class="step-name">第六步：美团抖音验券设置</view>
									<view class="step-opreate">
										<text class="operate-item" @tap="goPage('/moduleB/manage/meituanTiktok')">去设置</text>
									</view>
								</view>
								<view class="step-item">
									<view class="step-name">第七步：功能区设置</view>
									<view class="step-opreate">
										<text class="operate-item" @tap="goPage('/moduleB/manage/function')">去设置</text>
									</view>
								</view>
								<view class="step-item">
									<view class="step-name">第八步：结算账户设置</view>
									<view class="step-opreate">
										<text class="operate-item" @tap="goPage('/moduleB/manage/setSettle')">去设置</text>
									</view>
								</view>
								<view class="step-item">
									<view class="step-name">第九步：开业</view>
									<view class="step-opreate">
										<text class="operate-item" @tap="goPage('/pages-activation/opening')">去设置</text>
									</view>
								</view>
							</view>
							
							<view class="progress-bar">
								<view class="bar-item" :class="{'active-item':item.active==1}" v-for="item in openStep" :key="item.step">
									<view class="circle"></view>
									<view class="line" v-if="item.step!=9"></view>
								</view>
							</view>
						</view>
					</view>
				</block>

				<button @tap="openCustomerServiceChat()" class="contact-btn"></button>
				<h-watermark :title="watermarkTitle" :mobile="watermarkMobile" :appNameShow="false"></h-watermark>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			const currentMonth = this.getDate('start', 'month')
			const currentYear = this.getDate('start', 'year')
			const watermarkTitle = uni.getStorageSync('username')
			const watermarkMobile = uni.getStorageSync('mobile')
			return {
				pageOpc: 0,
				customHeight: {
					height: 30,
					top: 20
				},
				navigationBarHeight: "",
				navHeight: "",
				iStatusBarHeight: "",
				storeInfo: {
					shop_name: "加载中...", //店铺姓名
					store_status_data: "business", //店铺状态:preparation=筹备中,business=营业中,closed_shop=已闭店
					count: 0, //今日结账订单
					money: 0, //订单总额
					recharge_consumption: 0, //充值消费金额
					coupon_deduction_money: 0, //卡卷抵扣金额
					recharge_money: 0 //充值金额
				},
				storeData: {
					yjz: 0,
					order_ze: 0,
					cz_sum: 0,
					yhjqk: 0,
					ye_sum: 0,
					meituan_sum: 0
				},
				note: "",
				noteId: "",
				signin_status: false,
				records_status: false,
				transmit_status: false,
				currentMonth: currentMonth,
				currentYear: currentYear,
				watermarkTitle: watermarkTitle,
				watermarkMobile: watermarkMobile,
				customerUrl: "",
				corpId: "",

				openStep: [{
						step: 1,
						name: "确认店铺信息",
						active: 0
					},
					{
						step: 2,
						name: "智慧设备激活",
						active: 0
					},
					{
						step: 3,
						name: "设置桌台",
						active: 0
					},
					{
						step: 4,
						name: "设置定价",
						active: 0
					},
					{
						step: 5,
						name: "营销活动设置",
						active: 0
					},
					{
						step: 6,
						name: "美团抖音验券设置",
						active: 0
					},
					{
						step: 7,
						name: "功能区设置",
						active: 0
					},
					{
						step: 8,
						name: "结算账户设置",
						active: 0
					},
					{
						step: 9,
						name: "开业",
						active: 0
					}
				],
				hardware_type: 1, //硬件类型  1:aqara   2:智能盒子
				identity: 1,
				is_mini:0,
				in_coming:0,
				describeFlag:false,
				day_platform_commission_list:[],
				dividend_by:"",
				cooperation_period:"",
				endViewTime:"",
				isShow:true
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			//胶囊高度
			// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
			this.customHeight = wx.getMenuButtonBoundingClientRect()
			// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
			this.navigationBarHeight = this.customHeight.height + (this.customHeight.top - this.iStatusBarHeight) * 2
			// 总体高度 = 状态栏高度 + 导航栏高度
			this.navHeight = this.navigationBarHeight + this.iStatusBarHeight
			//#endif
			this.getCustomerInfo();
		},
		onShow() {
			this.dividend_date = uni.getStorageSync('dividend_date') || ''
			this.cooperation_period=uni.getStorageSync('cooperation_period') || ''
			this.identity=uni.getStorageSync('identity')
			this.is_mini=uni.getStorageSync('is_mini')
			console.log(this.identity)
			if(this.cooperation_period==2&&this.identity!=1){
				this.isShow=!this.isDividend()
			}else{
				this.isShow=true
			}
			console.log(this.isShow)
			this.getStoreInfo();
			this.storeDetails();
			this.getOpenStep()
		},
		onReady() {
			setTimeout(() => {
				this.pageOpc = 1
			}, 100)
		},
		methods: {
			isDividend(){
				this.endViewTime=uni.getStorageSync('dividend_by')
				let endViewTime=this.convertDateToTimestamp(this.endViewTime.replace(/-/g, '/'));
				let date = new Date().getTime()
				return endViewTime<=date
			},
			convertDateToTimestamp(dateString) {
			    return new Date(dateString).getTime();
			},
			// 开业步骤
			getOpenStep() {
				this.$request.post(this.$api.openConfirm, {
					store_id: uni.getStorageSync('store_id')
				}, {
					token: true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code == 1) {
						this.hardware_type = data.hardware_type
						let open = data.open
						this.openStep[0].active = open.is_info // 店铺信息
						this.openStep[1].active = open.is_binding // 设备激活
						this.openStep[2].active = open.is_equipment // 设置桌台
						if (open.is_price_one == 1 && open.is_price_two == 1 && open.is_price_three == 1) {
							this.openStep[3].active = 1 // 设置定价（三个都满足才高亮）
						}
						this.openStep[4].active = open.is_coupon // 营销活动
						this.openStep[5].active = open.is_tuangou // 美团抖音团购
						this.openStep[6].active = open.is_use // 功能区
						this.openStep[7].active = open.is_pay // 结算账户
					}
				})
			},

			getCustomerInfo() {
				this.$request.post(this.$api.getCustomerInfo, {
					store_id: uni.getStorageSync('store_id')
				}, {
					token: true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code == 1) {
						this.customerUrl = data.customer_url
						this.corpId = data.enterprise_id
					}
				})
			},

			jumpPage(step, url) {
				let data = this.openStep[step - 2]
				if (step == 2 && data.active == 0) {
					this.$tools.showToast('请先确认店铺信息！')
					return
				} else if (step == 3 && data.active == 0) {
					this.$tools.showToast('请先激活设备！')
					return
				} else if (step == 4 && data.active == 0) {
					this.$tools.showToast('请先设置桌台！')
					return
				} else {
					uni.navigateTo({
						url: url
					})
				}
			},

			openCustomerServiceChat() {
				let that = this
				wx.openCustomerServiceChat({
					extInfo: {
						url: that.customerUrl
					},
					corpId: that.corpId,
					success(res) {
						console.log(res)
					},
					complete(com) {
						console.log(com)
					}
				})
			},
			// 获取时间
			getDate(type, fields) {
				let result = ``
				const date = new Date();
				if (fields == 'month') {
					date.setMonth(date.getMonth() - 1);
				}
				if (fields == 'year') {
					date.setFullYear(date.getFullYear() - 1);
				}
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				if (fields == 'month') {
					result = `${month}`
				}
				if (fields == 'year') {
					result = `${year}`
				}
				return result;
			},
			goManage() {
				uni.switchTab({
					url: '/pages/manage/manage'
				})
			},
			getStoreInfo() {
				this.$request.post(this.$api.storeInfo, {
					store_id: uni.getStorageSync('store_id')
				}, {
					token: true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code == 1) {
						this.hardware_type=data.hardware_type
						this.in_coming=data.in_coming||0
						uni.setStorageSync('in_coming',this.in_coming)
						uni.setStorageSync('coming_time',data.coming_time)
						if (data.consultation) {
							this.note = data.consultation.title
							this.noteId = data.consultation.id
						}
					}
				})
			},
			goTableManage(){
				if(this.hardware_type==1){
					this.goPage('/pages/index/tableManage');
				}else{
					this.goPage('/pages/index/tableManageNew');
				}
			},
			// 店铺详情
			storeDetails() {
				this.$request.post(this.$api.storeDetails, {
					store_id: uni.getStorageSync('store_id')
				}, {
					token: true
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						let {
							data = {}
						} = res;
						this.storeInfo = data.store_info
						this.storeData = data.as
						this.day_platform_commission_list=this.storeData.day_platform_commission_list
						this.signin_status = data.signin_status
						this.records_status = data.records_status
						this.transmit_status = data.transmit_status
						uni.setStorageSync('shopname', data.store_info.shop_name)
						if (!data.consultation_status) {
							uni.setTabBarBadge({
								index: 2,
								text: '!'
							})
						} else {
							uni.removeTabBarBadge({
								index: data
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.mask-wrap{
		background: rgba(4,3,54,0.8);
	}
	.describe-model{
		background: #1D1C5C;
		border-radius: 12rpx;
		z-index: 999;
		position: fixed;
		top: 200upx;
		left: 28upx;
		right: 28upx;
		margin: auto;
		padding: 40upx 28upx;
		height: 1134upx;
		overflow-y: scroll;
		.describe-top{
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			color: #FFFFFF;
			line-height: 40rpx;
			text-align: center;
		}
		.close-btn{
			width: 40upx;
			height: 40upx;
			position: absolute;
			top: 40upx;
			right: 28upx;
		}
		.describe-cont{
			.describe-title{
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #26BCFD;
				line-height: 35rpx;
				margin-bottom: 14upx;
			}
			.describe-item{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: rgba(255,255,255,0.8);
				line-height: 48rpx;
				margin-bottom: 14upx;
				align-items: baseline;
				.describe-dot{
					display: inline-block;
					width: 10upx;
					height: 10upx;
					border-radius: 50%;
					background-color: #D2D2DE;
					flex: none;
					margin-right: 10upx;
				}
			}
		}
	}
	.tips-box{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #8C98E3;
	}
	.content {
		padding: 34upx;
		padding-bottom: 200upx;
	}

	.contact-btn {
		width: 120upx;
		height: 120upx;
		border-radius: 50%;
		position: fixed;
		right: 32upx;
		bottom: 200upx;
		background: url('../../static/index/customer-icon.png') no-repeat center/100% 100%;
	}

	.change-box {
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		width: 233upx;
		background: rgba(0, 0, 0, 0.06);
		border: 2px solid rgba(255, 255, 255, 0.251);
		border-radius: 63upx;
		justify-content: center;
		position: fixed;
		z-index: 999;

		.change-icon {
			width: 36upx;
			height: 36upx;
			margin-left: 24upx;
		}
	}

	.active-box {
		.active-item {
			width: 188rpx;
			height: 88rpx;
			background: #1D1C5C;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			padding: 0 16rpx;

			image {
				width: 34rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}

			.fail-icon {
				width: 38rpx;
				height: 38rpx;
				flex: none;
				margin: 0;
				margin-left: 10rpx;
			}
		}

		.currment {
			background: rgba(255, 70, 70, .4);
		}
	}

	.shop-info-box {
		height: 160upx;
		background: #1D1C5C;
		border-radius: 16upx;
		padding: 0 30upx;
		align-items: flex-end;
		// margin-top: 72upx;
		margin-bottom: 10rpx;

		.shop-info {
			justify-content: center;
			height: 100%;

			.shop-name {
				font-size: 36upx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 50upx;
				color: #FFFFFF;
			}

			.status {
				width: 112upx;
				height: 40upx;
				line-height: 40upx;
				background: #2CA522;
				border-radius: 36upx;
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				margin-top: 18upx;
			}

			.repair-status {
				background: #fc750d;
			}
		}

		.boss-img {
			width: 200upx;
			height: 200upx;
		}
	}

	.operation-box {
		margin-top: 30upx;

		.operation-item {
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34upx;
			color: #FFFFFF;
			margin-right: 40upx;
			&:nth-last-of-type(1){
				margin-right: 0;
			}
			.operation-img {
				width: 140upx;
				height: 140upx;
				margin-bottom: 16upx;
			}
		}
	}

	.profit-box {
		flex-wrap: wrap;
		margin-top: 38upx;

		.profit-item {
			width: 330upx;
			height: 160upx;
			background: #FFFFFF;
			border-radius: 16upx;
			font-size: 48upx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 66upx;
			color: #040336;
			justify-content: center;
			margin-bottom: 20upx;

			.profit-text {
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 34upx;
				color: #666666;
			}
		}
	}
	.profit-box-new{
		margin-top: 20upx;
		.describe-box{
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: rgba(255,255,255,0.5);
			line-height: 33rpx;
			justify-content: flex-end;
			.describe-icon{
				width: 32upx;
				height: 32upx;
				margin-right: 6upx;
			}
		}
		.profit-top{
			margin-top: 20upx;
			.profit-item{
				width: 222rpx;
				height: 128rpx;
				background: #1D1C5C;
				border-radius: 12rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 40rpx;
				color: #FFFFFF;
				line-height: 47rpx;
				justify-content: center;
				.profit-text{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: rgba(255,255,255,0.5);
					line-height: 28rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
					margin-top: 10upx;
				}
			}
		}
		.profit-cont{
			background: #1D1C5C;
			border-radius: 12rpx;
			padding: 28upx;
			margin-top: 14upx;
			.profit-title-box{
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #26BCFD;
				line-height: 38rpx;
				font-style: normal;
				text-transform: none;
				margin-bottom: 24upx;
			}
			.profit-item{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: rgba(255,255,255,0.8);
				line-height: 50rpx;
			}
			.line{
				width: 100%;
				height: 1rpx;
				background: rgba(255,255,255,0.1);
				margin: 10upx 0;
			}
		}
		.profit-month{
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 38rpx;
			padding: 38upx 28upx;
			background: #1D1C5C;
			border-radius: 12rpx;
			margin-top: 14upx;
		}
	}
	// 筹备中的设置步骤
	.setting-procedure {
		.guide-info {
			margin-top: 24rpx;
			width: 100%;
			padding: 10rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			color: #fff;
			border: 2rpx solid rgba(255, 255, 255, 0.5);
			border-radius: 16rpx;

			>view {
				margin-top: 6rpx;
				text-indent: 2rem;
			}
		}

		.set-info {
			margin-top: 46rpx;
			padding: 0 30rpx;
			display: flex;
			justify-content: space-between;

			.step-box {
				.step-item {
					color: #fff;
					margin-bottom: 50rpx;

					.step-name {
						font-size: 32rpx;
					}

					.step-opreate {
						margin-left: 100rpx;
						margin-top: 26rpx;
						display: flex;
						gap: 30rpx;

						.operate-item {
							min-width: 140rpx;
							height: 56rpx;
							padding: 0 16rpx;
							box-sizing: border-box;
							font-size: 24rpx;
							text-align: center;
							line-height: 56rpx;
							background: rgba(31, 124, 247, 1);
							border-radius: 16rpx;
						}
					}
				}
			}

			.progress-bar {
				.bar-item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.circle {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						background: rgb(183, 189, 198);
					}

					.line {
						width: 4rpx;
						height: 125rpx;
						// background: rgb(183, 189, 198);
						background: rgb(255, 195, 11);
					}
				}

				.active-item {
					.circle {
						background: rgb(255, 195, 11);
					}

					// .line{
					// 	background: rgb(255,195,11);
					// }
				}
			}
		}
	}
</style>